<template>
  <image class="top_bg_image" src="/static/topbg.png" mode="scaleToFill" />
  <view class="top_view">
    <view class="user_info_view">
      <image class="picture" src="/static/material/picture.png" mode="scaleToFill"></image>
      <view class="top_txt">
        <view class="title_txt">
          Mr.Doya
        </view>
        <view class="phone_txt">
          手机号：18834750909
        </view>
      </view>
    </view>

    <view class="top_btn_view">
      <view class="top_btn">
        <view class="btn_left">想看</view>
        <uni-icons class="btn_right  btn_right_1" type="right" size="13"></uni-icons>
        <view class="btn_right btn_right_2">0</view>
      </view>
      <view class="top_btn">
        <view class="btn_left">足迹</view>
        <uni-icons class="btn_right  btn_right_1" type="right" size="13"></uni-icons>
        <view class="btn_right btn_right_2">0</view>
      </view>
    </view>
  </view>
  <view class="grid_view">
    <uni-grid :column="4" :highlight="true" @change="change" :showBorder="false">
      <uni-grid-item v-for="(item, index) in grids" :index="index" :key="index">
        <view class="grid-item-box" style="background-color: #fff;">
          <image class="grid_image" :src="item.image" mode="scaleToFill"></image>
          <text class="grid_text">{{item.text}}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
  <view class="list">
    <view class="item" v-for="(item,index) in list">
      <view class="left_item">
        <image class="item_thumb" :src="item.image" mode="scaleToFill"></image>
        <view class="item_title">
          {{item.text}}
        </view>
      </view>
      <uni-icons class="arrow_right" type="right" size="14"></uni-icons>
    </view>


    <!-- <uni-list>
      <uni-list-item class="item" v-for="(item,index) in list" :show-extra-icon="true" showArrow :thumb="item.image"
        :title="item.text">
        <template v-slot:header>
          <view class="uni-img-size-sm">
            <image class="list_thumb" :src="item.image" mode="aspectFill"></image>
          </view>
        </template>
      </uni-list-item>
    </uni-list> -->

  </view>
</template>

<script>
  export default {
    data() {
      return {
        grids: [{
            image: "/static/mini/dingdan.png",
            text: "我的订单"
          },
          {
            image: "/static/mini/kaquan.png",
            text: "我的卡券"
          },
          {
            image: "/static/mini/guanyanren.png",
            text: "观演人"
          },
          {
            image: "/static/mini/dizhi.png",
            text: "地址管理"
          }
        ],
        list: [{
            image: "/static/mini/fuwuzizhi.png",
            text: "服务资质"
          },
          {
            image: "/static/mini/guangyu.png",
            text: "关于我们"
          },
          {
            image: "/static/mini/wenti.png",
            text: "常见问题"
          },
          {
            image: "/static/mini/anquan.png",
            text: "账号与安全"
          },
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
  .top_bg_image {
    width: 100%;
    height: 210px;
    display: block;
  }

  .top_view {
    // background-image: url('../../static/topbg.png');
    // background-size: cover;
    width: 100%;
    height: 170px;
    margin-top: -180px;

    .user_info_view {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: left;

      .picture {
        width: 64px;
        height: 64px;
        margin: 10px;
        border-radius: 50%;
        margin-left: 5%;
      }

      .top_txt {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;

        .title_txt {
          font-size: 20px;
          font-weight: 600;
          text-align: LEFT;
          color: #333333;
          line-height: 23px;
        }

        .phone_txt {
          font-size: 12px;
          text-align: LEFT;
          color: #9b9b9b;
          line-height: 23px;
          height: 17px;
          margin-top: 5px;
        }
      }
    }

    .top_btn_view {
      width: 90%;
      height: 60px;
      margin: 20px 5%;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;

      .top_btn {
        width: 48%;
        height: 60px;
        line-height: 60px;
        background: white;
        border-radius: 10px;
        color: #333333;

        .btn_left {
          float: left;
          margin-left: 15px;
        }

        .btn_right {
          float: right;
        }

        .btn_right_1 {
          margin-top: -1px;
          margin-right: 10px;
        }

        .btn_right_2 {
          margin-right: 5px;
        }
      }
    }
  }

  .grid_view {
    width: 90%;
    margin: 10px 5%;
    background-color: white;
    border-radius: 10px;

    .grid-item-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
    }

    .grid_image {
      width: 38px;
      height: 38px;
    }

    .grid_text {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-400;
      font-weight: 400;
      text-align: center;
      color: #333333;
    }
  }

  .list {
    width: 90%;
    // height: 260px;
    margin: 10px 5%;
    border-radius: 10px;
    background-color: white;

    .item {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;


      .left_item {
        display: flex;
        justify-content: center;
        align-items: center;

        .item_thumb {
          width: 22px;
          height: 22px;
          margin-left: 20px;
        }

        .item_title {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          text-align: LEFT;
          color: #333333;
          margin-left: 8px;
        }
      }

      .arrow_right {
        margin-right: 20px;
      }
    }

  }
</style>